<template>
   <div class="main-card">
    <el-card class="box-card">
      <template #header>
        <span>{{ title }}</span>
      </template>
      <el-form ref="ruleForm" :model="queryParams" label-width="100px">
        <div class="search-form">
          <el-form-item label="角色名称">
            <el-input v-model="queryParams.roleName" clearable />
          </el-form-item>
          <el-form-item label="权限字符">
            <el-input v-model="queryParams.roleKey" clearable />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.enable" clearable placeholder="请选择">
              <el-option
                label="正常"
                :value="1"
              />
              <el-option
                label="停用"
                :value="0"
              />
            </el-select>
          </el-form-item>
          <el-button style="margin-left: 20px" type="primary" @click="search">搜索</el-button>
        </div>
      </el-form>
      <div style="margin:20px 0;">
          <el-button v-hasPermi="['system:role:add']" type="primary" @click="addOrUpdate()">添加角色</el-button>
          <el-button  v-hasPermi="['system:role:remove']" type="danger" @click="deleteRole">删除角色</el-button>
      </div>
      <div>
        <el-table
          :data="dataList"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="roleId"
            label="角色编号"
            width="120"
          />
          <el-table-column
            prop="roleName"
            label="角色名称"
            width="200"
          />
          <el-table-column
            prop="roleKey"
            label="权限字符"
            width="200"
          />
          <el-table-column
            prop="roleSort"
            label="显示顺序"
            width="200"
          />
          <el-table-column
            prop="enable"
            label="状态"
            width="120"
          >
            <template #default="{row}">
              <el-switch v-model="row.enable" @change="handleStatusChange(row)" />
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="120"
            :formatter="dateFormat"
          />
          <el-table-column label="操作" width="250">
            <template v-slot="{ row }">
              <el-button  v-hasPermi="['system:role:edit']" type="primary" @click="addOrUpdate(row)">修改</el-button>
              <el-button v-hasPermi="['system:role:remove']" type="danger" @click="deleteRole(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          v-show="total>0"
          :current-page="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          :total="total"
          @current-change="handleCurrentChange"
        />
       </div>
    </el-card>
    <a-u-role :value="isAuRoleShow"  @close="isAuRoleShow = false" @onRefresh="search" />
   </div>
</template>

<script lang="ts">
import AURole from './components/AURole.vue'
import { useRoute } from 'vue-router'
import { toRefs, reactive, defineComponent } from 'vue'
import { useStore } from 'vuex'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Role, StateType as RoleStateType } from '@/store/modules/system/role'
import tableList, { BaseQueryType, BaseDataType } from '@/mixins/tableList'

interface QueryParamsType extends BaseQueryType{
  roleName: string;
  roleKey: string;
  enable: number;
}

interface DataType extends BaseDataType<Role>{
  isAuRoleShow: boolean;
  queryParams: QueryParamsType;
}

export default defineComponent({
  name: 'Role',
  components: { AURole },
  setup() {
    const route = useRoute()
    const title = route.meta.title
    const store = useStore<{role: RoleStateType}>()
    const data = reactive<DataType>({
      url: 'role/getList',
      isAuRoleShow: false,
      selectList: [],
      dataList: [],
      total: 0,
      queryParams: {
        roleName: '',
        roleKey: '',
        enable: 1,
        pageNum: 1,
        pageSize: 10
      }
    })
    const {
      dateFormat,
      getList,
      handleSelectionChange,
      handleCurrentChange,
      search
    } = tableList(data)
    search.value()
    const handleStatusChange = (row: Role) => {
      const text = row.enable ? '启用' : '停用'
      ElMessageBox.confirm('确认要' + text + '"' + row.roleName + '"角色吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return store.dispatch('role/changeStatus', row)
      }).then(() => {
        ElMessage({
          message: '更改状态成功',
          type: 'success'
        })
        getList.value()
      }).catch(() => {
        row.enable = !row.enable
      })
    }
    const addOrUpdate = async (row: Role) => {
      const roleId = row ? row.roleId : null
      await store.dispatch('role/getRole', roleId)
      data.isAuRoleShow = true
    }
    const deleteRole = (row: Role) => {
      const roleIds = row.roleId || (data.selectList || []).map(item => item.roleId)
      ElMessageBox.confirm('您确定要删除"' + roleIds + '"角色吗, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return store.dispatch('role/deleteRole', roleIds)
      }).then(() => {
        ElMessage({
          message: '删除成功',
          type: 'success'
        })
        getList.value()
      }).catch()
    }
    return {
      ...toRefs(data),
      dateFormat,
      handleSelectionChange,
      handleCurrentChange,
      search,
      handleStatusChange,
      addOrUpdate,
      deleteRole
    }
  }
})
</script>
